// 执行
<template>
  <div class="home-bg padding-20">
    <el-collapse v-model="activeNames">
      <el-collapse-item name="top">
        <template slot="title">
          <div class="flex border justify-between padding-20 margin-top-20 fill-box" style="width: 100%">
            <div class="font-size-18 font-weight-700 padding-bottom-20">计划和执行对比</div>
            <div @click.stop>
              <span class="padding-right-10">截止到</span>
              <el-date-picker class="no-padding-right-box" style="width: 110px;" :clearable="false" size="mini" v-model="searchMonth" type="month" placeholder="" @change="changeDate"> </el-date-picker>
            </div>
          </div>
        </template>
        <div class="group-operation-box bg-color-fffff">
          <compare-execute ref="compareExecute" />
        </div>
      </el-collapse-item>

      <el-collapse-item name="seTop">
        <template slot="title">
          <div class="font-size-18 font-weight-700 padding-20">计划和预测对比</div>
        </template>
        <div class="group-operation-box bg-color-fffff">
          <plan-forecast ref="planForecast" :selectTime="selectTime"></plan-forecast>
        </div>
      </el-collapse-item>

      <el-collapse-item name="middle">
        <template slot="title">
          <div class="flex justify-between">
            <div class="font-size-18 font-weight-700 padding-20">现金流量监控和预测</div>
          </div>
          <div class="flex align-center main-shop" @click.stop>
            <span class="padding-right-10">主力店</span>
            <el-switch class="margin-right-10" v-model="queryMainStore" :width="35" @change="shopQuery"> </el-switch>
          </div>
        </template>
        <div class="margin-top-20 bg-color-fffff">
          <div>
            <flow-rate ref="flowRate" :showCashGap="true" pageType="budget" :charts-data="chartsData" :select-time="selectTime" :hasIncome="true" :hasPay="true" planType="execute"></flow-rate>
            <flow-rate-table ref="flowRate" planType="execute" :charts-data="chartsData" :select-time="selectTime" :hasIncome="true" :hasPay="true"></flow-rate-table>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
  import dayjs from 'dayjs';
  import planForecast from '../components/planForecast';
  import compareExecute from '../components/compareExecute';
  import flowRate from '@c/homeChart/flowRate';
  import flowRateTable from '@c/homeChart/flowRateTable.vue';
  import { apiOperationIncomeCash } from '@a/about';
  import merge from 'webpack-merge';

  export default {
    data() {
      return {
        selectTime: this.$route.query.year + '-' + this.$route.query.month,
        searchMonth: this.$route.query.year + '-' + this.$route.query.month,
        chartsData: {},
        queryMainStore: false,
        activeNames: ['top', 'seTop', 'middle', 'bottom'],
        planFprecastModel: {},
      };
    },
    methods: {
      async getChartsData() {
        let res = await apiOperationIncomeCash({
          projectKeys: this.$route.query.projectKey ? [this.$route.query.projectKey] : null,
          planYear: this.$route.query.year,
          planMonth: this.$route.query.month,
          queryMainStore: this.queryMainStore,
        });
        this.chartsData = res;
      },

      async changeDate() {
        let date = dayjs(this.searchMonth).format('YYYY-MM');
        console.log(date);
        this.selectTime = date;
        let year = date.split('-')[0];
        let month = Number(date.split('-')[1]);
        this.$router.replace({
          query: merge(this.$route.query, { year: year, month: month }),
        });
        this.$refs.compareExecute.getInfo();
        this.getChartsData();
        await this.$nextTick();
        this.$refs.planForecast.getCompareTotal();
      },

      shopQuery() {
        this.getChartsData();
      },
    },
    mounted() {
      this.getChartsData();
    },
    components: {
      compareExecute,
      flowRate,
      flowRateTable,
      planForecast,
    },
  };
</script>

<style lang="scss" scoped>
  .main-shop{
    margin-left: calc(100% - 330px);
  }
</style>